<template>
  <div class="app-container">


<!--    </el-dialog>-->
    <div class="formBox wechat">
      <!--      <div class="wechatTop">-->
      <!--        <div class="bg-danger p-2 left-0 right-0 flex align-center justify-between" v-if="!chat || !chat.isOnline">-->
      <!--          <span class="text-white font">当前处于离线状态</span>-->
      <!--          <div class="border py-1 px-2 rounded" hover-class="bg-hover-danger" @click="chat.reconnectConfirm()">-->
      <!--            <span class="text-white font">重新连接</span>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </div>-->
      <!-- 数据修复 -->

      <el-row>
        <el-col :span="6">
          <div class="grid-content bg-gray ">
            <div class="grid-content2 bg-dark">
              <el-row >
                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                  <div class="item" >
                    <el-button :type="lightNum===0?'primary':''" size="medium"  icon="el-icon-chat-dot-round" @click="clickItem(0)">顾客咨询</el-button>
                    <free-badge badgeClass="position-absolute" badgeStyle="top:2px;right:3px" v-if="totalNoreadnum"
                                :value="totalNoreadnum"></free-badge>
                  </div>
                </el-col>
                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                  <div class="item" >
                    <el-button :type="lightNum===1?'primary':''" size="medium"  icon="el-icon-user" @click="clickItem(1)">专家列表</el-button>
                  </div>
                </el-col>
              </el-row>
              <el-row   align="center">
                <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" :offset="1">
                  <div class="item" >
                    <el-input placeholder="请输入顾客名字"  v-model="patientName" clearable
                              @keyup.enter.native="handleQuery(2)" size="mini">
                    </el-input>

                  </div>
                </el-col>
                <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                  <div class="item" >
                    <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery(2)">搜索
                    </el-button>
                  </div>
                </el-col>
              </el-row>


            </div>
            <history ref="history" @getItem="getItem" :lightNum="lightNum" :patientName="patientName"></history>
          </div>
        </el-col>
        <el-col :span="18">
          <div class="grid-content1 bg-light">
            <dialogue v-if="item" ></dialogue>
          </div>
        </el-col>
      </el-row>
    </div>


  </div>


</template>

<script>
import department from "@/views/components/department/index.vue";
import {
  mapGetters,
  mapState
} from 'vuex'
import history from "@/views/wechatWorkstation/chat/history";
import dialogue from "@/views/wechatWorkstation/chat/dialogue";
import freeBadge from "@/views/wechatWorkstation/chat/free-badge.vue"
import {listAllPhrases} from "@/api/system/phrase";
export default {
  name: "wechatList",
  components:{
    history,
    dialogue,
    freeBadge,
    department
  },
  computed: {
    ...mapState({
      // list: state => state.user.chatList,
      currentList: state => state.user.chatList,
      totalNoreadnum: state => state.user.totalNoreadnum,
      chat: state => state.user.chat
    }),
    ...mapGetters(["device"]),

  },
  data(){
    return{
      lightNum:0,
      item:'',
      // 查询参数
      // queryParams: {
      //   hospitalId: undefined,
      //   deptId: undefined,
      // },
      // phrasesList:[],
      patientName:'',


    }
  },
  beforeDestroy() {
    this.chat.destoryChatObject()
    this.$store.commit('SET_CHATBTN',false)
  },
  mounted(){
    this.$store.commit('SET_CHATBTN',true)

  },
  methods:{
    handleQuery(num){
      this.lightNum=num
      this.$refs.history.getPatientList()

    },
    clickItem(num){
      this.lightNum=num
      this.patientName=''
    },
    getItem(item){
      this.item=item
    },
    // refreshData(data) {
    //   this.queryParams.hospitalId = data.hospitalId
    //   this.queryParams.deptId = data.deptId
    //   this.getPhraseList()
    // },
    // getPhraseList() {
    //   listAllPhrases(
    //     this.queryParams
    //   ).then((response) => {
    //     console.log('getPhraseList--response',response)
    //     if(response.code==200){
    //       this.phrasesList = response.data;
    //     }
    //
    //   });
    // },


  }
}
</script>

<style scoped lang="scss">
.wechat {
  .wechatTop{

  }

  ::v-deep .el-row {
    .el-col {
      .grid-content {
        border-radius: 4px;
        height: 80vh;
        overflow: hidden;
        overflow-y: scroll;
      }
      .grid-content1 {
        border-radius: 4px;
        height: 80vh;
      }
      .grid-content2 {
        //display: flex;
        //justify-content: space-around;
        border-bottom: 1px solid #C4C4C5;
        padding: 8px 0;
      }
      ::-webkit-scrollbar{
        width: 0.5em;
      }
      ::-webkit-scrollbar-track{
        background-color: #f1f1f1;
      }
      ::-webkit-scrollbar-thumb{
        background-color: #888;
        border-radius: 16px;
      }

      .bg-dark {
        background-color:#ECE9E7;
        .item{
          padding: 5px 0;
          text-align: center;
          position: relative;
        }
      }

      .bg-gray {
        background: #ECE9E7;
      }

      .bg-light {
        background: #F5F5F5;

      }


    }

  }

}


</style>
